<script lang="ts" setup>
  import { ref, watch,reactive } from "vue"
    import { type FormInstance, ElMessage, ElMessageBox } from "element-plus"
  import { getSiteWorkCustomDepartmentList, deleteSiteWorkCustomDepartmentById,getSiteWorkCustomDepartmentById } from "@/api/site"
  import { usePagination } from "@/hooks/usePagination"
  import useTable from '@/hooks/useTable'
  import handle from './components/handle.vue'
  import SiteSelect from '@/components/SiteSelect/index.vue'

  const loading = ref<boolean>(false)
  const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()
  const tableData = ref<any>([])
  const dialogVisible = ref<boolean>(false)
  const activeRow = ref<any>()
    const searchFormRef = ref<FormInstance | null>(null)
  const searchData = reactive<any>({})

  const getTableData = () => {
    loading.value = true
    getSiteWorkCustomDepartmentList({
      ...paginationData,
      ...searchData
    }).then((res: any) => {
      paginationData.total = res.totalCount
      tableData.value = res.data
    }).catch(() => {
      tableData.value = []
    }).finally(() => {
      loading.value = false
    })
  }

  const { handleSelectionChange,multipleSelection, handleBatchDelete, handleDelete } = useTable({getList:getTableData})

  const handleUpdate = (row: any) => {
    activeRow.value={
      pics:[],
      siteId:''
    }
    getSiteWorkCustomDepartmentById({ id: row.siteWorkId }).then((res: any) => {
      activeRow.value = res
      activeRow.value.pics = res.pic ? res.pic.split(',') : []
      dialogVisible.value = true
    })

  }

  const handleAdd = () => {
    activeRow.value = {
      pics:[],
      siteId:''
    }
    dialogVisible.value = true
  }

  //关闭操作框
  const closeHandle = () => {
    dialogVisible.value = false
  }

  //操作完成
  const successHandle = () => {
    dialogVisible.value = false
    getTableData()
  }

  const handleChange = (e: any)=>{
    console.log(e,'eeeee')
    searchData.value.siteName=e.name
  }

  //搜索操作
  const handleSearch = () => {
    paginationData.currentPage === 1 ? getTableData() : (paginationData.currentPage = 1)
  }

  //重置搜索表单
  const resetSearch = () => {
    searchFormRef.value?.resetFields()
    handleSearch()
  }


  watch([() => paginationData.currentPage, () => paginationData.pageSize], getTableData, { immediate: true })
</script>

<template>
  <div class="app-container">
      <div class="title-wrapper">场地每日工作管理</div>
      <div class="page-main">
        <div shadow="never" class="search-wrapper" v-permission="['daily-work-search']">
        <div class="search-main">
          <el-form ref="searchFormRef" label-width="90px" :inline="true" label-position="left" :model="searchData">
            <el-form-item prop="siteId" label="场地名称">
              <SiteSelect v-model="searchData.siteId" :multiple="false" width="150px" @change="handleChange"></SiteSelect>
            </el-form-item>
            <el-form-item prop="type" label="类型">
              <el-select clearable v-model="searchData.type" placeholder="请选择" style="width: 150px;">
                <el-option label="清洁" :value="0"></el-option>
                <el-option label="消杀" :value="1"></el-option>
                <el-option label="疏通" :value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="workDate" label="日期">
              <el-date-picker v-model="searchData.workDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date" style="width:100%;" placeholder="请选择"/>
            </el-form-item>
          </el-form>
        </div>
        <div class="search-btn">
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </div>
      </div>
      <div class="toolbar-wrapper">
        <el-button type="primary" v-permission="['daily-work-add']" @click="handleAdd">新增</el-button>
          <!-- <el-button v-permission="['training-courseClass:batchDel']" type="info" :disabled="!multipleSelection.length" @click="handleBatchDelete(deleteBatch,'courseCategoryId')">批量删除</el-button> -->
      </div>

      <div v-loading="loading"  class="table-wrapper">
        <el-table :data="tableData" @selection-change="handleSelectionChange">
          <!-- <el-table-column sortable type="selection" width="55" /> -->
          <el-table-column sortable prop="typeName" label="类型"  />
          <el-table-column sortable prop="workDate" label="工作日期"  />
          <el-table-column sortable prop="siteName" label="所属场地"  />
          <el-table-column sortable label="图片" >
            <template #default="scope">
              <div v-if="scope.row.pic">
                <el-image
                  v-for="(image, index) in scope.row.pic.split(',')"
                  :key="index"
                  style="width: 50px; height: 50px; margin-right: 5px;"
                  :src="image"
                  :preview-src-list="scope.row.pic.split(',')"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column sortable prop="remark" label="备注"  />
          <el-table-column fixed="right" label="操作" width="150" >
            <template #default="scope">
              <el-button type="primary" v-permission="['daily-work-edit']" text size="small" @click="handleUpdate(scope.row)">修改</el-button>
              <el-button type="danger" v-permission="['daily-work-del']" text size="small" @click="handleDelete(deleteSiteWorkCustomDepartmentById, scope.row.courseCategoryId, scope.row.name)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pager-wrapper">
        <el-pagination
          :layout="paginationData.layout"
          :page-sizes="paginationData.pageSizes"
          :total="paginationData.total"
          :page-size="paginationData.pageSize"
          :currentPage="paginationData.currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>

  <handle
    v-if="dialogVisible"
    :title="activeRow.siteWorkId?'修改每日工作':'新增每日工作'"
    :data="activeRow"
    @success="successHandle"
    @cancel="closeHandle"
    />
</template>

<style lang="scss" scoped>

</style>
